//首页的less样式文件
@import "common";
// @import 可以把一个样式文件导入到另外一个样式文件里面
//link 是把一个样式文件引入到html页面里面

body {

	min-width: 320px;
	/* 最小的宽度 */
	max-width: 15rem;
	/* 最大宽度 不必要设置 */
	margin: 0 auto;
	/* 字体样式，不是苹果用后面 的字体 */
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: 15px;
	line-height: 1.5;
	background-color: skyblue;
}



img {
	border: none;
	display: block;
}

ul,p,ol {
	margin: 0;
	padding: 0;
	list-style: none;
}


a {
	text-decoration: none;
	color: #000;
	background-color: transparent;
}


/* 打开app */
.app {
	/* 高度先写死 */
	// top:0;
	width: 15rem;
	/* 让他始终在最上面*/
	position: relative;
	z-index: 3;
	position: fixed;
	background-color: #fff;
	height: (100rem/@baseFont);
	
ul>li {
	float: left;
	height: (90rem/@baseFont);
	line-height: (90rem/@baseFont);
	background-color: #fff;
	text-align: center;
	}
ul li:nth-child(1) {
	width: 25%;
}
ul li:nth-child(1) span {
	color: rgb(237, 112, 152);
	font-size: (75rem/@baseFont);
}

ul li:nth-child(2) {
	width: 42%;
}

ul li:nth-child(2) span {
	float: right;
	padding-right: (10rem/@baseFont);
	font-size: (55rem/@baseFont);
}

ul li:nth-child(3) {
	width: 13%;
}

ul li:nth-child(3) span {
	font-size: (80rem/@baseFont);

}

ul li:nth-child(4) {
	width: 20%;
	color: #ebebeb;
	background-color: rgb(237, 112, 152);

}

}











/* 页面里面是rem计算公式:页面元素的px/html字体大小 */
/* 打开app */
@baseFont: 50;
.search-wrap {
	position: relative;
	 z-index: 3;
	/* flex布局 */
	display: flex;
	position: fixed;
	margin-top: (100rem /@baseFont);
	//文字居中
	// left: 50%;
	// transform: translateX(-50%);
	/* 固定定位必须有宽度*/
	width: 15rem;
	height: (100rem /@baseFont);
	
	background-color: #fff;
	

/* 头像 */
	.search-touxiang {
	/* 相对定位 */
	// position: absolute;
	// top: 0;
	// left: 0;

	
	width: (80rem/@baseFont);
	height: (100rem/@baseFont);
	
	/* 头像图 */
	a>span {
		font-size: (70rem/@baseFont);	
		padding-left: (5rem/@baseFont);
		}


	}


/* 搜索框 */
	.search {
	/* 父 */
	position: relative;
	flex: 1;

	
	
	.sousuo-box{
		
		height: (100rem/@baseFont);
		
		
	}
	
	span{
		
		position: absolute;
		top: (30rem/@baseFont);
		left: (25rem/@baseFont);
		font-size: (30rem/@baseFont);
	}
	input{
		outline: none;
		
		border: 0;
		height: (66rem/@baseFont);
		
		width: 100%;
		border-radius: (33rem/@baseFont);
		margin: (16rem/@baseFont) (10rem/@baseFont);
		background-color: #dcdcdc;
		font-size: (25rem/@baseFont);
		padding-left: (55rem/@baseFont);
	}

 }


/* 最右box */
 .search-right {
	width: (200rem/@baseFont);
	height: (100rem/@baseFont);


 a>span{
	font-size: (70rem/@baseFont);
	padding-left: (20rem/@baseFont);
	// margin-right: (10rem/@baseFont);
	}
	
	}

}


/* 文字栏 */
#word {
	position: relative;
	 z-index: 3;
	position: fixed;
	margin-top: (200rem /@baseFont);;
	background-color: #fff;
	
	//文字居中
	// left: 50%;
	// transform: translateX(-50%);
	/* 固定定位必须有宽度*/
	width: 15rem;
	height: (50rem /@baseFont);

	
	.nav {
	display: flex;
	justify-content: space-evenly;
	list-style: none;
	margin: 0 auto;
	// flex-wrap: nowrap;
		/* 默认激活文字 */
		.active>a {
		color: rgb(237, 112, 152);
		}
		.active>a::before{
			visibility: visible;
			color:rgb(237, 112, 152);
			/* 菜单选项中状态默认显示线条 */
			-webkit-transform: scaleX(1);
			-ms-transform: scaleX(1);
			transform: scaleX(1);
			
		}
		
		.nav-item {
		line-height:(45rem /@baseFont);
		font-size: (30rem /@baseFont);
		
		}
		/* 鼠标滑过时候的界面的颜色 */
		.nav-link:hover {
			color: rgb(237, 112, 152);
		}
		
		.nav-link:hover::before{
			visibility: visible;
			background-color: rgb(237, 112, 152);
			-webkit-transform: scaleX(1);
			-ms-transform: scaleX(1);
			transform: scaleX(1);

		}
		.nav-link{
			padding-top: (45px /@baseFont);
			padding-bottom: (45px /@baseFont);
			padding-left: (45px /@baseFont);
			padding-right: (45px/@baseFont);
			color: #000000;
			position: relative;
			opacity: 1 !important;
		}
		.nav-link::before{
			content: "";
			position: absolute;
			width: 100%;
			height: 3px;
			bottom: 0;
			left: 0;
			background-color: rgb(237, 112, 152);
			/*默认设置隐藏*/
			visibility: hidden;
			/*水平方向上尺寸为0*/
			-webkit-transform: scaleX(0);
			-ms-transform: scaleX(0);
			transform: scale(0);
			/*慢入慢出0.1s的效果*/
			-webkit-transition: all 0.1s ease-in-out 0s;
			-o-transition: all 0.1s ease-in-out 0s;
			transition: all 0.1s ease-in-out 0s;
			z-index: -1;
		}
	}

	

}





/* 文字！！！内容！！！*/
.bai{
	
	width: (750rem/@baseFont);
	height: (270rem/@baseFont);
	background-color: #fff;
}

.guidong {
	width: (750rem/@baseFont);
	height: (368rem/@baseFont);

	a>img {
		width: 100%;
		height: 100%;

	}
}




.context {
	//让中间内容置于最下面！！！
	

	width: (750rem/@baseFont);
	//flex-wrap实现弹性盒自动换行
	display: flex;
	flex-wrap: wrap;

	background-color: #fff;
	
	
.view{
		
	 position: relative;
	 // padding-left: (10rem/@baseFont);
	 width: (325rem/@baseFont);
	 height: (300rem/@baseFont);
	 background-color: #fff;

	 overflow: hidden;
	 border: (10rem/@baseFont) solid #d0d0d0;
	 display: inline-block;
	
	 flex-grow: 1;
	 //防止被挤压
	 flex-shrink: 0;
	 .xuanfu{

		position: absolute;
		list-style: none;
		text-decoration: none;
		display: flex;
		width: (325rem/@baseFont);
		height:(50rem/@baseFont) ;
		text-align: center;
		left: 0;
		//下移！！！
		margin-bottom: (90rem/@baseFont);;
		bottom: 0;
		width: 100%;
		
		background-color: rgba(195, 188, 188, 0.5);
		
		li:nth-child(3){
			padding-left: (100rem/@baseFont);;
			color: #fff;
		}
		
		li{
			display: flex;
			// border-radius:(33rem/@baseFont); 
			color: #fff;
			.iconfont{
				font-size: (40rem/@baseFont);
				margin-left: (200px/@baseFont);;
				
			}
			.shuzi{
				margin-top: (250px/@baseFont);
				font-size: (25rem/@baseFont);
			}
		}
		
				
	 }
	
	 a>img {
		
		// border-radius:(33rem/@baseFont); 
		width:100%;
		height: 70%;
	
	  }
	
	
	 .view-word{
	 position: relative;
	 // padding-left: (10rem/@baseFont);
	 width: (325rem/@baseFont);

	 background-color: #fff;
	 // border: (10rem/@baseFont) solid yellow;
	 display: inline-block;
	
	 flex-grow: 1;
	 //防止被挤压
	 flex-shrink: 0;
	 width: 100%;
	 height: 70%;
	
	 p{	
		
		position: absolute;
	    font-size: (30rem/@baseFont);
		line-height: (50rem/@baseFont);
		color: #000000;
		text-align: center;
		}
	 }
	 
	

	 }
	
	 .video{
		 
		 position: relative;
		 // padding-left: (10rem/@baseFont);
		 width: (325rem/@baseFont);
		 height: (500rem/@baseFont);
		 background-color: #fff;
	     
		 overflow: hidden;
		 border: (10rem/@baseFont) solid #d0d0d0;
		 display: inline-block;
		
		
		 flex-grow: 1;
		 //防止被挤压
		 flex-shrink: 0;
		 .xuanfu{
	
			position: absolute;
			list-style: none;
			text-decoration: none;
			display: flex;
			width: (750rem/@baseFont);
			height:(125rem/@baseFont) ;
			text-align: center;
			left: 0;
			//下移！！！
			margin-bottom: (90rem/@baseFont);
			bottom: 0;
			width: 100%;
			
			background-color: rgba(195, 188, 188, 0.5);
			
			li:nth-child(3){
				
				padding-left: (450rem/@baseFont);;
				color: #fff;
			}
			
			li{
				display: flex;
				// border-radius:(33rem/@baseFont); 
				color: #fff;
				.iconfont{
					font-size: (40rem/@baseFont);
					margin-left: (200px/@baseFont);;
					
				}
				.shuzi{
					margin-top: (250px/@baseFont);
					font-size: (25rem/@baseFont);
				}
			}
			
					
		 }
		
		 a>img {
			
			// border-radius:(33rem/@baseFont); 
			width:100%;
			height: 70%;
		
		  }
		
		
		 .view-word{
		 position: relative;
		 // padding-left: (10rem/@baseFont);
		 width: (325rem/@baseFont);
		
		 background-color: #fff;
		 // border: (10rem/@baseFont) solid yellow;
		 display: inline-block;
		
		 flex-grow: 1;
		 //防止被挤压
		 flex-shrink: 0;
		 width: 100%;
		 height: 100%;
		
		p{	
			
			position: absolute;
		    font-size: (30rem/@baseFont);
			line-height: (30rem/@baseFont);
			color: #000000;
			margin:(50rem/@baseFont) auto;
			
			}
		}

	}

}	


/* footer底部 */
.footer {
	// position: fixed;	
	// /* 固定定位必须有宽度*/
	// width: 15rem;
	// height: (150rem /@baseFont);
	// bottom: 0;
	// background-color: #fff;
	// //文字居中
	// left: 50%;
	// transform: translateX(-50%);
	// overflow: hidden;
	// text-align: center;
	
	position: fixed;
	width: 15rem;
	height: (120rem /@baseFont);
	background-color: #fff;
	// bottom: 0;
	z-index: 3;
	bottom: 0;
	//文字居中
	// left: 50%;
	// transform: translateX(-50%);
	overflow: hidden;
	text-align: center;
	
	.icon {
	width: 1em;
	height: 1em;
	vertical-align: -0.15em;
	/* fill:currentColor是什么意思？ 
			          比如，fill ,对于形状元素和文本，它定义了绘制元素的颜色。 
			          对于动画，它定义了动画的最终状态。 在下面的例子中，它定义了图标的颜色。
			           在css中，currentColor是一个变量，这个变量的值是当前元素的color值。 */
	fill: currentColor;
	/*  */

	}
	
	#bnav {
	
		/* fixed相对于浏览器窗口进行定位，正常情况下没有问题，当使用transform:translate(0px,-5px);属性后问题就出现了 */
		/* z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 */
		display: flex;
	
	 li:nth-child(1) {
		width: 20%;
	}
	
	 li:nth-child(2) {
		width: 20%;
	}
	
	 li:nth-child(3) {
		width: 20%;
	}
	
	 li:nth-child(4) {
		width: 20%;
	}
	
	 li:nth-child(5) {
		width: 20%;
	}
	
	svg {
		font-size: (70rem /@baseFont);
	
	}
	
	p {
		font-size: (14rem /@baseFont);
		line-height: (50rem /@baseFont);
	
	}
	
	 .footer-nav>.icon:hover {
		color: rgb(237, 112, 152);
	}


	 .active {
		color: rgb(237, 112, 152);
	}
	
	}
	

}


/* 轮播图 */
.main{

	position: relative;
	width: 15rem;
	height: (380rem/@baseFont);
	margin: 0 auto;
	overflow: hidden;
	background-color: #fff;
	img{
			//设置图片的最大宽度和最大高度
			max-width: 15rem;
		    
	}
}
.left,.right{
	display: none;
	position: absolute;
	top: 50%;
	margin-top: -(60rem/@baseFont);
	width: (35rem/@baseFont);
	height: (70rem/@baseFont);
	background: rgba(0, 0, 0, .3);
	text-align: center;
	line-height: (70rem/@baseFont);
	color: #fff;
	font-size: (30rem/@baseFont);
	z-index:2;
}
.right{
	right: 0;
}
.circle {
	position: absolute;
	bottom: 10px;
	left: 50px;
}
.main ul{
	position: absolute;
	left: 0;
	top: 0;
	width: 1000%;
}
.main ul li{
	float:left;
}

ol{
	display: flex;
	width: 20%;
	justify-content: center;
	align-items: center;
	margin-left: (500rem/@baseFont);
	margin-bottom: (40rem/@baseFont);
}
.circle li {
	
	width: 10%;
	margin-left: (2rem/@baseFont);
	height: (10rem/@baseFont);
	border: 2px solid #D0D0D0;
	border-radius: 100%;
	// background-color: #D0D0D0;
	/*鼠标经过显示小手*/
	cursor: pointer;
}
.current {
    background-color: rgb(237, 112, 152);
}





	

	





























